<template>
  <div class="pages">
    <BasicPage ref="pageContainer" v-model="selects" :search-model="searchModel" :table-model="tableModel" :table-options="tableOptions" :table-props="tableProps" :table-options-width="120" :api="api" v-on="events" @listAfter="listAfter" />
    <!-- <Demo /> -->
  </div>
</template>

<script>
import { dataExportList } from '@/api/export'
// import { mapGetters } from 'vuex'
// import Demo from '../GenTable/index.vue'
export default {
  name: 'BillsManage',
  components: {
    // Demo
    // DebitNoteDia: () => import('./dialogs/DebitNoteDia/index'),
    // BillsMethods: () => import('./dialogs/BillsMethods/index')
  },
  data() {
    const that = this
    return {
      selects: [],

      //api配置
      api: {
        list: dataExportList,
        listParams: {
          checkType: 1
        }
      },
      // 事件配置
      events: {
        down(row) {
          that.downFileBtn(row)
        }
      },
      //表格配置
      tableOptions: [
        {
          eventName: 'down',
          label: '下载文件'
        }
      ],
      tableModel: [
        {
          prop: 'createTime',
          label: '操作时间',
          width: 150,
          attrs: {
            fixed: true
          }
        },
        {
          prop: 'createBy',
          label: '操作人',
          width: 150
        },
        {
          prop: 'typeName',
          label: '导出类型'
        },
        // {
        //   prop: 'billAmount',
        //   label: '操作内容',
        //   renderColumn: (row) => `￥${row.billAmount || 0}`
        // },
        {
          prop: 'status',
          label: '状态',
          width: '100px'
        },
        {
          prop: 'fileExpireTime',
          label: '内容'
          // renderColumn: (row) => `￥${row.billAmount || 0}`
        }
      ],
      tableProps: {
        // showSelect: false,
        // rowKey: 'billId'
      },

      //搜索相关
      searchModel: [
        {
          label: '导出状态',
          type: 'select',
          attrs: { size: 'small', clearable: true },
          prop: 'status',
          optionAttrs: {
            labelKey: 'value',
            valueKey: 'key'
          },
          options: () => new Promise.resolve(this.staticDicts.dataExportStatus)
        },

        {
          label: '季度区间',
          type: 'quarterange',
          prop: 'checkDate',
          attrs: {
            clearable: true,
            size: 'small',
            'start-placeholder': '开始开票季度',
            'end-placeholder': '结束开票季度'
          },
          rangeKeys: ['createBeginTime', 'createEndTime']
        },
        {
          type: 'daterange',
          prop: 'createTime',
          label: '导出时间',
          attrs: {
            size: 'small',
            'start-placeholder': '创建开始日期',
            'end-placeholder': '创建结束日期'
          }

          // rangeKeys: ['createBeginTime', 'createEndTime']
        }
      ],
      //自定义相关
      loading: false
    }
  },
  computed: {
    // ...mapGetters(['staticDicts', 'staticDictsFilters', 'userDictList'])
  },
  methods: {
    listAfter() {},
    //远程搜索
    // handlRemote({ k, type }) {
    //   const item = this.apiList.find((item) => item.key === this[type])
    //   return new Promise((resolve) => {
    //     this.$request(item.api, { keyword: k }).then(({ data }) => {
    //       resolve(data)
    //     })
    //   })
    // },
    // 下载文件
    downFileBtn() {},
    // 操作回调
    refresh() {
      this.selects = []
      this.$refs.pageContainer?.handleReset()
      this.$refs.pageContainer?.clearSelection()
    }
  }
}
</script>

<style lang="scss" scoped>
.numBars {
  width: 100%;
  height: 80px;
  box-shadow: 0 0 10px #ebebeb;
  border-radius: 15px;
  margin: 10px 0;
  padding: 10px;
  &__items {
    flex: 1;
    justify-content: flex-start;
  }
  &__items_icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    margin-right: 10px;
    color: #f1f1f1;
    font-size: 36px;
  }
}
</style>
